<template>
	<!-- 登录 -->
	<view class="login h100 w100 flex-col">
		<view class="login-bg">
			<!-- <view class="txt"> 欢迎登录 </view>
			<view class="txt1"> 信发北山综合管理平台 </view> -->
		</view>
		<view class="login-form flex-grow-1">
			<uni-forms :modelValue="loginForm" :rules="rules" ref="Form" label-position="top">
				<uni-forms-item name="username">
					<template #label><text class="fw">账号</text></template>
					<up-input v-model="loginForm.username" border="bottom" autoBlur clearable placeholder="请输入账号"></up-input>
				</uni-forms-item>
				<uni-forms-item name="password">
					<template #label><text class="fw">密码</text></template>
					<up-input v-model="loginForm.password" border="bottom" password autoBlur type="password" placeholder="请输入密码"></up-input>
				</uni-forms-item>
			</uni-forms>
			<u-checkbox-group style="margin: -16px 0 20px 0;">
				<u-checkbox v-model="remberUser" shape="square" label="记住密码"></u-checkbox>
			</u-checkbox-group>
			<u-button @tap="login()" shape="circle" color="linear-gradient(83deg, #005DFF -2%, #009AF9 99%)">登 录 </u-button>
			<image class="bottom" src="/static/img/login/loginBg1.png" mode=""></image>
		</view>
	</view>
</template>
<script setup>
	import {
		authLogin
	} from "@/api/customApi.js"
	import {
		setAuthorization
	} from "@/router/auth.js"
	

	let Form = ref(null),
		remberUser = ref('记住密码')
	// 登录参数
	const loginForm = reactive({
		password: "5231705@Qq",
		rememberMe: true,
		username: "mingchi01",
	})
	// 校验规则
	const rules = {
		username: {
			rules: [{
				required: true,
				errorMessage: '请输入姓名',
			}]
		},
		password: {
			rules: [{
				required: true,
				errorMessage: '请输入密码',
			}]
		}
	}
	// 登录逻辑
	const login = () => {
		Form.value.validate().then(async (res) => {
			// const res1 = await authLogin({
			// 	userName: loginForm.username,
			// 	password: loginForm.password,
			// });
			uni.showToast({
				title: "登录成功",
				icon: "success",
				success: async function() {
					uni.switchTab({
						url: "/pages/index/index",
					});
				},
			});
		}).catch(err => {})
	}
</script>

<style scoped lang="scss">
	.login-bg {
		background-image: url("/static/img/login/loginBg.png");
		background-size: 100% 90%;
		background-repeat: no-repeat;
		height: 575rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: #fff;
		padding-left: 40rpx;

		.txt {
			font-weight: 500;
			font-size: 48rpx;
			margin-top: 20rpx;
		}

		.txt1 {
			font-weight: 500;
			font-size: 48rpx;
			margin-top: 20rpx;
		}
	}

	.login {
		&-form {
			background-color: #fff;
			border-radius: 40rpx 40rpx 0px 0px;
			background-color: #fff;
			margin-top: -90rpx;
			padding: 80rpx 60rpx 0;
			position: relative;

			.bottom {
				width: 50%;
				height: 60rpx;
				position: absolute;
				bottom: 40rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
</style>